import React from "react";
import { getTypeList } from "../../api";
import { useNavigate } from "react-router-dom";
import { SearchBar, Swiper } from "antd-mobile";
import styles from "./index.module.scss";
export default function index() {
  let getTps = async () => {
    let { data } = await getTypeList();
    console.log(data);
  };
  let nav = useNavigate();
  getTps();
  return (
    <div className={styles.box}>
      {/* 搜索框 */}
      <header>
        <SearchBar
          placeholder="入园"
          style={{
            "--border-radius": "20px",
            "--height": "30px",
          }}
        />
      </header>
      {/* banner */}
      <Swiper loop indicator={() => null}>
        <Swiper.Item key="1">
          <div className={styles.banner} onClick={() => nav("/bookdetail")}>
            <img src="src/images/touxiang01.jpg" alt="" />
            <div>
              <h1>方形的蛋</h1>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut
                eligendi debitis reiciendis vero magnam perferendis dolores
                optio cupiditate et, libero quam qui, nesciunt aliquam explicabo
                non ut natus a velit.
              </p>
            </div>
          </div>
        </Swiper.Item>
        <Swiper.Item key="2">
          <div className={styles.banner}>
            <img src="src/images/touxiang01.jpg" alt="" />
            <div>
              <h1>方形的蛋</h1>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut
                eligendi debitis reiciendis vero magnam perferendis dolores
                optio cupiditate et, libero quam qui, nesciunt aliquam explicabo
                non ut natus a velit.
              </p>
            </div>
          </div>
        </Swiper.Item>
      </Swiper>
      {/* 分类 */}
      <div className={styles.types}>
        <ul>
          <li>
            <img src="src\images\touxiang03.jpg" alt="" />
            <p>日常认物</p>
          </li>
          <li>
            <img src="src\images\touxiang03.jpg" alt="" />
            <p>日常认物</p>
          </li>
          <li>
            <img src="src\images\touxiang03.jpg" alt="" />
            <p>日常认物</p>
          </li>
          <li>
            <img src="src\images\touxiang03.jpg" alt="" />
            <p>日常认物</p>
          </li>
          <li>
            <img src="src\images\touxiang03.jpg" alt="" />
            <p>日常认物</p>
          </li>
          <li>
            <img src="src\images\touxiang03.jpg" alt="" />
            <p>日常认物</p>
          </li>
          <li>
            <img src="src\images\touxiang03.jpg" alt="" />
            <p>日常认物</p>
          </li>
          <li>
            <img src="src\images\touxiang03.jpg" alt="" />
            <p>日常认物</p>
          </li>
          <li>
            <img src="src\images\touxiang03.jpg" alt="" />
            <p>日常认物</p>
          </li>
          <li>
            <img src="src\images\touxiang03.jpg" alt="" />
            <p>日常认物</p>
          </li>
        </ul>
        <div>全部分类 {" >"}</div>
      </div>
      {/* 达人书单 */}
      <div className={styles.starbooklist}>
        <header>
          <p>
            <strong>达人书单</strong>
            <span>200位阅读推广人联手推荐</span>
          </p>
          <span>37个书单 {">"}</span>
        </header>
        {/* 轮播 */}
        <section>
          <ul>
            <li>
              <img src="src\images\touxiang05.jpg" alt="" />
              <p>用这些八八八八八八阿八八八八八爸爸</p>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Repellendus possimus fugit omnis adipisci aut non quo aliquam
                cumque dolores corrupti ipsa iure a officia, labore in
                laboriosam dolore ad quia!
              </p>
              <div>
                <img src="src\images\touxiang05.jpg" alt="" />
                <span>唐谈谈谈谈</span>
              </div>
            </li>
            <li>
              <img src="src\images\touxiang05.jpg" alt="" />
              <p>用这些八八八八八八阿八八八八八爸爸</p>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Repellendus possimus fugit omnis adipisci aut non quo aliquam
                cumque dolores corrupti ipsa iure a officia, labore in
                laboriosam dolore ad quia!
              </p>
              <div>
                <img src="src\images\touxiang05.jpg" alt="" />
                <span>唐谈谈谈谈</span>
              </div>
            </li>
            <li>
              <img src="src\images\touxiang05.jpg" alt="" />
              <p>用这些八八八八八八阿八八八八八爸爸</p>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Repellendus possimus fugit omnis adipisci aut non quo aliquam
                cumque dolores corrupti ipsa iure a officia, labore in
                laboriosam dolore ad quia!
              </p>
              <div>
                <img src="src\images\touxiang05.jpg" alt="" />
                <span>唐谈谈谈谈</span>
              </div>
            </li>
            <li>
              <img src="src\images\touxiang05.jpg" alt="" />
              <p>用这些八八八八八八阿八八八八八爸爸</p>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Repellendus possimus fugit omnis adipisci aut non quo aliquam
                cumque dolores corrupti ipsa iure a officia, labore in
                laboriosam dolore ad quia!
              </p>
              <div>
                <img src="src\images\touxiang05.jpg" alt="" />
                <span>唐谈谈谈谈</span>
              </div>
            </li>
          </ul>
        </section>
      </div>
      {/* 热门榜单 */}
      <div className={styles.hotbang}>
        <header>
          <span>热门榜单</span>
          <span>详细榜单 {">"}</span>
        </header>
        <ul>
          <li>
            <p>0-1岁热门榜单</p>
            <img src="src\images\touxiang09.jpg" alt="" />
          </li>
          <li>
            <p>0-1岁热门榜单</p>
            <img src="src\images\touxiang09.jpg" alt="" />
          </li>
          <li>
            <p>0-1岁热门榜单</p>
            <img src="src\images\touxiang09.jpg" alt="" />
          </li>
          <li>
            <p>0-1岁热门榜单</p>
            <img src="src\images\touxiang09.jpg" alt="" />
          </li>
          <li>
            <p>0-1岁热门榜单</p>
            <img src="src\images\touxiang09.jpg" alt="" />
          </li>
        </ul>
      </div>
      {/* 达人精选 */}
      <div className={styles.starSelected}>
        <header>
          <span>达人精选</span>
          <span>8年绘本馆馆长精选绘本</span>
        </header>
        <ul>
          <li>
            <img src="src\images\touxiang09.jpg" alt="" />
            <div>
              <p>万圣节派对</p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Deserunt, aspernatur provident mollitia eveniet aliquam
                dignissimos fugiat sequi asperiores exercitationem libero sed,
                esse assumenda! Voluptate tempore quaerat vitae distinctio?
                Dolor, velit!
              </p>
              <div>
                <img src="src\images\touxiang09.jpg" alt="" />
                <span>卡卡妈咪</span>
              </div>
            </div>
          </li>
          <li>
            <img src="src\images\touxiang09.jpg" alt="" />
            <div>
              <p>万圣节派对</p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Deserunt, aspernatur provident mollitia eveniet aliquam
                dignissimos fugiat sequi asperiores exercitationem libero sed,
                esse assumenda! Voluptate tempore quaerat vitae distinctio?
                Dolor, velit!
              </p>
              <div>
                <img src="src\images\touxiang09.jpg" alt="" />
                <span>卡卡妈咪</span>
              </div>
            </div>
          </li>
          <li>
            <img src="src\images\touxiang09.jpg" alt="" />
            <div>
              <p>万圣节派对</p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Deserunt, aspernatur provident mollitia eveniet aliquam
                dignissimos fugiat sequi asperiores exercitationem libero sed,
                esse assumenda! Voluptate tempore quaerat vitae distinctio?
                Dolor, velit!
              </p>
              <div>
                <img src="src\images\touxiang09.jpg" alt="" />
                <span>卡卡妈咪</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  );
}
